<template>
    <div ref="chartContainer" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import {
        ref,
        onMounted,
    } from 'vue';
    import * as echarts from 'echarts';

    const chartContainer = ref(null);
    let myChart = null;

    onMounted(() => {
        if (chartContainer.value) {
            myChart = echarts.init(chartContainer.value);
            const option = {
                tooltip: { // 添加 tooltip 配置
                    trigger: 'item', // 鼠标悬停在数据项上时触发
                    formatter: function(params) {
                        // 自定义显示内容，params 包含了当前数据点的信息
                        return ` ${params.value}`;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['2024级', '2023级', '2022级', '2021级']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [
                        {
                            value: 120,
                            itemStyle: {
                                color: '#55aaff'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#98ffd1'
                            }
                        },
                        {
                            value: 150,
                            itemStyle: {
                                color: '#6ce7df'
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: '#fcbc8e'
                            }
                        }
                    ],
                    type: 'bar'
                }]
            };;
            myChart.setOption(option);
        }
    });

</script>

<style>
    /* 可以在这里添加样式 */
</style>


<!-- <template>
    <div ref="chartContainer" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import {
        ref,
        onMounted,
        watchEffect // 引入watchEffect来响应数据变化
    } from 'vue';
    import * as echarts from 'echarts';
    import axios from 'axios'; // 假设使用axios进行HTTP请求

    const chartContainer = ref(null);
    let myChart = null;
    const chartData = ref({}); // 用于存储从后端获取的数据

    // 获取后端数据的函数
    const fetchData = async () => {
        try {
            const response = await axios.get('/api/chart-data'); // 假设后端数据接口为/api/chart-data
            chartData.value = response.data;
        } catch (error) {
            console.error('Error fetching chart data:', error);
        }
    };

    onMounted(() => {
        if (chartContainer.value) {
            myChart = echarts.init(chartContainer.value);
            // 初始化图表配置
            updateChart();
        }
        fetchData(); // 组件挂载后立即获取数据
    });

    // 监听chartData的变化，更新图表
    watchEffect(() => {
        if (myChart && chartData.value) {
            updateChart();
        }
    });

    // 更新图表的函数
    const updateChart = () => {
        const { xAxisData, seriesData } = chartData.value;
        const option = {
            xAxis: {
                type: 'category',
                data: xAxisData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: seriesData,
                type: 'bar'
            }]
        };
        myChart.setOption(option);
    };
</script>

<style>
    /* 可以在这里添加样式 */
</style> -->

<!-- {
    "xAxisData": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "seriesData": [
        {
            "value": 120,
            "itemStyle": {
                "color": "#55aaff"
            }
        },
        {
            "value": 200,
            "itemStyle": {
                "color": "#a90000"
            }
        },
        // ... 其他数据项
    ]
} -->